<template>
  <div class="">
      <el-form ref="form" :model="form" class="newstypeform" label-width="120px">
        <el-form-item label="新闻标题" class="is-required">
          <el-input class="w518" v-model="form.title" placeholder="请输入中文新闻标题"></el-input>
        </el-form-item>
        <el-form-item label="英文新闻标题" class="is-required">
          <el-input class="w518" v-model="form.titleEn"  placeholder="请输入英文新闻标题"></el-input>
        </el-form-item>
        <el-form-item label="新闻副标题" class="is-required">
          <el-input class="w518"  v-model="form.subtitle" placeholder="请输入中文新闻副标题"></el-input>
        </el-form-item>
        <el-form-item label="英文新闻副标题" class="is-required">
          <el-input class="w518"  v-model="form.subtitleEn" placeholder="请输入英文新闻副标题"></el-input>
        </el-form-item>
        <el-form-item label="新闻内容" class="is-required">
          <quill-editor v-model="form.content" ref="myQuillEditor" class="editer"
              :options="{}">
          </quill-editor>
        </el-form-item>
        <el-form-item label="英文新闻内容" class="is-required">          
          <quill-editor v-model="form.contentEn" ref="myQuillEditor" class="editer"
              :options="{}">
          </quill-editor>
        </el-form-item>
        <el-form-item label="新闻分类" class="is-required">
          <ul class="newstype">
            <li class="regular" v-if="newsTypeName">{{newsTypeName}}</li>
            <li v-for="item in typeList" :class="item.checked?'othertype checked':'othertype'" @click="selType(item)">{{item.name}}</li>
            <el-button  @click="delType()" type="danger">删除分类</el-button>
            <el-button  @click="addType()" type="success">添加分类</el-button>
          </ul>
        </el-form-item>
      </el-form>
      <el-button type="primary w200 mrauto mt20" round @click="onSubmit">保存</el-button>
      <el-dialog title="添加分类" class="w750" :visible.sync="dialogTableVisible">
          <el-form ref="form" :model="Typeform" class="msgform newstypeform" label-width="100px">
            <el-form-item label="新闻分类名称">
              <el-input class="w200" v-model="Typeform.name"></el-input>
            </el-form-item>
            <el-button type="primary" class="w140" size="small" @click="onSubmitOfType">确认</el-button>
          </el-form>
      </el-dialog>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
        form:{
          type:'',
          title:'',
          titleEn:"",
          subtitleEn:'',
          subtitle:'',
          content:'',
          contentEn:''
        },
        newsTypeName:'',
        Typeform:{},
        typeList:[],
        dialogTableVisible:false,
        type:'',
        newsid:''
    }
  },
  methods:{
      selType(data){
        this.typeList.forEach(function (ele) {
          ele.checked=false;
        })
        data.checked=true;
        this.newsTypeName=data.name;
        this.form.type=data.id;
      },
      delType(){
        var flag=false;
        var obj={};
        this.typeList.forEach(function (ele) {
          if(ele.checked){
              flag=true;
              obj=ele;
          }
        })
        if(flag){
          this.$confirm('确定要删除吗?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {        
          var httpApi=this.$store.state.httpApi;
          this.$http.post(this.$store.state.httpApi + 'newsType/del?id='+obj.id).then(response =>{
            if(response.status == 200){
              this.$message.success('删除成功');
					    this.getRowsOfType();
            }else{
              console.log('接口返回失败!',response);
            }
          },response => {
            
            console.log('请求失败',response)
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });          
        });
        }else{
          this.$message.error('请先选择新闻分类！');
        }
      },
      addType(){
        this.dialogTableVisible=true;
      },
      onSubmit(){       
            var flag=true;
            var param={};
            for(var j in this.form){
              param[j]==this.form[j];
              if(this.form[j]==''){
                flag=false;
              }
            }
            if(flag){
              if(this.newsid){
                this.form.id = this.newsid;
              }
              this.$http.post(this.$store.state.httpApi + (this.newsid ?'blNews/update':'blNews/save'),this.form).then(response =>{
                if(response.status == 200){
                  if(response.data.success){
                    this.$message.success('发布成功');
                    this.$router.go(-1);
                  }else{
                    this.$message.error(response.data.error);
                  }
                }else{
                  console.log('接口返回失败!',response);
                }
                },response => {
                  console.log('请求失败',response)
                })
            }else{
              this.$message.error('您还有必填项还没有填！');
            }
            
      },
      onSubmitOfType(){
            this.$http.post(this.$store.state.httpApi + ('newsType/save'),this.Typeform).then(response =>{
              if(response.status == 200){
                if(response.data.success == false){
                  this.$message.error("该类别已存在");
                }else{
                  this.$message.success('添加成功');
                }
              
                this.dialogTableVisible=false;
                this.getRowsOfType();
              }else{
                console.log('接口返回失败!',response);
              }
              },response => {
                console.log('请求失败',response)
              })     
      },
      getRowsOfType(){
          this.$http.get(this.$store.state.httpApi + 'newsType/all').then(response =>{
          if(response.status == 200){
          this.typeList=response.data.data;
          var that=this;
          if(this.form.type){
            this.typeList.forEach(function(ele){
                if(ele.id==that.form.type){
                  ele.checked=true;
                  that.newsTypeName=ele.name;
                }
            })
          }else{
            this.typeList[0].checked=true;
            this.newsTypeName=this.typeList[0].name;
            this.form.type = this.typeList[0].id;
          }
          }else{
            console.log('接口返回失败!',response);
          }
          },response => {
            console.log('请求失败',response)
          })
       },
       getOne(){
          this.newsid = this.$route.query.id;
          this.$http.get(this.$store.state.httpApi + 'blNews/getBlNews?id='+this.newsid).then(response =>{
            if(response.status == 200){
              this.form = response.data.data;
            }else{
              console.log('接口返回失败!',response);
            }
            this.getRowsOfType();
          },response => {
            this.getRowsOfType();
            console.log('请求失败',response)
          })
       }
  },
   created(){
    
    if(this.$route.query.id){
      this.getOne();
    }else{
      this.getRowsOfType();
    }
    
  }  
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less" scoped>
    .msgform{
      width:310px;
      margin:0 auto;
    }
    .newstype li{
      padding:11px 44px;
      display:inline;
      border:1px solid #D8D8D8;
      position:relative;
      margin-right:20px;
    }
    .newstype li.regular{
      color:#fff;
      background:#68C7FF;
      border-color:#68C7FF;
    }
    .newstype li.othertype:after{
      content:"✔";
      position:absolute;
      right:0;
      bottom:0;
      border-bottom: 28px solid #D7CBBC;
      border-left: 28px solid transparent;
      width: 0;
      height: 0;
      text-indent: -12px;
      color:#fff;
    }
    .newstype li.othertype.checked:after{
      border-bottom-color: #F58467;
    }
   .newstype .el-button{
     width:150px;
     border-radius: 0;
   }
   .creation{
     position:absolute;
    //  bottom:22px;
     width:200px;
     left:50%;
   }
   .creation .el-button{
     width:200px;
     margin-left:-100px;
   }
</style>
